<style media="screen">
  .todo ul {
    position: absolute;
    width: 100%;
    display: flex;
    height: 100px;
    width: 100%;
    background-image: url('assets/images/bg.png');
    background-size: cover;
  }

  #workIndex .extension-container {
    position: absolute;
    width: 80px;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, .2));
    border-radius: 4px;
    background-color: #fff;
    z-index: 1000;
  }

  #workIndex .extension-container.bill:before {
    content: '';
    position: absolute;
    right: -24px;
    top: 46%;
    transform: translate(-50%, 0);
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
  }

  #workIndex .extension-container.rent:before {
    content: '';
    position: absolute;
    left: -8px;
    top: 46%;
    transform: translate(-50%, 0);
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
  }

  #workIndex .resource-title-container .bottom-nav li{
    border:1px solid #f2f2f2;
    border-radius:0px;
    border-right:none;
    margin:0px;
  }

  #workIndex .resource-title-container .bottom-nav li:first-child{
    border-right:1px solid #f2f2f2;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  #workIndex .resource-title-container .bottom-nav li:last-child{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  #workIndex .project-container input[type=range]{
    height:12px;
    border-radius:12px;
  }

  #workIndex .industry-area-container{
    width: 640px;
  }

  /* #workIndex .chart-container .title-wrap{
    overflow: auto;
  } */

  .num-container p:hover{
    color:#337AB7;
  }
  .work-project-item .work-project-image{
    height: auto;;
  }
  .second-select .js-selected-q{
    margin-left: 0px;
    padding-left: 25px;
  }
  .third-select .js-selected-q{
    margin-left: 0px;
    padding-left: 50px;
  }
  .js-selected-q b{
    width: auto!important
  }
  .js-selected-project .js-selected-project-box .js-selected-q{
    background-position: 170px -30px;
  }
  .js-selected-project .js-selected-project-box div.active{
    background-position: 170px 26px;
  }
  .js-selected-project .js-selected-project-box .js-selected-q b{
    margin-left: 10px;
  }
  .second-select>li b{
    text-indent: 0em;
  }
  .first-select .ellipsis-1{
    min-width: 175px;
    max-width: 150px;
    padding-right: 45px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .second-select .ellipsis-1{
    min-width: 140px;
    max-width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .third-select b{
    min-width: 120px;
    max-width: 80px;
    padding-right: 30px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  #workIndex .chart-container .title{
    height:34px;
  }
</style>


<section class="pl-24 pr-24" id="workIndex">
  <!-- 右边 -->
  <div class="js-selected-project">
    <div class="css-pack-up"></div>
    <div class="js-selected-project-bg">
    </div>
    <div class="js-selected-project-box">
      <div class="select-project">
        <!--项目列表-->
      </div>
    </div>
  </div>

  <!-- 扩展指示 -->
  <div class="extension-container rent" v-if="rentStateFlag" @mouseenter="rentStateFlag = true" @mouseleave="rentStateFlag = false">
    <ul>
      <li @click="handleRentState('VA')" :class="{'active':rentState == 'VA'}">空置</li>
      <li @click="handleRentState('DU')" :class="{'active':rentState == 'DU'}">即将到期</li>
      <li @click="handleRentState('IP')" :class="{'active':rentState == 'IP'}">即将履约</li>
    </ul>
    <span class="arrow"></span>
  </div>

  <div class="extension-container bill" style="right:64px;" v-if="paymentStateFlag" @mouseenter="paymentStateFlag = true" @mouseleave="paymentStateFlag = false">
    <ul>
      <li @click="handleBillState('DU')" :class="{'active':paymentState == 'DU'}">即将到期</li>
      <li @click="handleBillState('OD')" :class="{'active':paymentState == 'OD'}">已逾期</li>
    </ul>
    <span class="arrow"></span>
  </div>

  <div class="css-work-warp overflow" style="borderBottom: 1px solid #E3E3E5;" v-if="permissions.indexOf('c109') > -1">
    <h3 class="font-16 pull-left">待办事项</h3>
    <a href="javascript:;" class="pull-left ml-10 color-333" @click="goToMyFlowList"><span class="icon-Nav-home-process border-l pl-12"></span> 我的流程</a>
  </div>
  <!-- 待办事项 -->
  <div class="todo" v-if="permissions.indexOf('c109') > -1">
    <img class="mask" src="assets/images/bg-mask.png" />
    <ul>
      <li>
        <a href="javascript:;" @click="goToWithdrawTodoList(data.wtTaskCount)">
          <p v-if="data.wtTaskCount != '0'">{{data.wtTaskCount || 0}}</p>
          <p v-if="data.wtTaskCount == '0'" style="fontSize:24px;lineHeight:48px;">暂无待办</p>
          <span>合同退租</span>
        </a>
      </li>
      <li>
        <a href="javascript:;" @click="goToContractTodoList(data.ctTaskCount)">
          <p v-if="data.ctTaskCount != '0'">{{data.ctTaskCount || 0}}</p>
          <p v-if="data.ctTaskCount == '0'" style="fontSize:24px;lineHeight:48px;">暂无待办</p>
          <span>合同新增</span>
        </a>
      </li>
			<li  v-if="permissions.indexOf('c341') > -1">
			  <a href="javascript:;" @click="toCCTPage">
			    <p v-if="data.cctTaskCount != '0'">{{data.cctTaskCount || 0}}</p>
			    <p v-if="data.cctTaskCount == '0'" style="fontSize:24px;lineHeight:48px;">暂无待办</p>
			    <span>合同变更</span>
			  </a>
			</li>
			<li v-if="isSINOOCEAN.indexOf('SINOOCEAN') > -1">
			  <a href="javascript:;" @click="goRRATPage">
			    <p v-if="data.rratTaskCount != '0'">{{data.rratTaskCount || 0}}</p>
			    <p v-if="data.rratTaskCount == '0'" style="fontSize:24px;lineHeight:48px;">暂无待办</p>
			    <span>租赁资源确认</span>
			  </a>
			</li>
			<li v-if="openFlag == 'Y'">
			  <a href="javascript:;" @click="goITPage">
			    <p v-if="data.itTaskCount != '0'">{{data.itTaskCount || 0}}</p>
			    <p v-if="data.itTaskCount == '0'" style="fontSize:24px;lineHeight:48px;">暂无待办</p>
			    <span>意向流程</span>
			  </a>
			</li>
			<li v-if="billFlowFlag == 'Y'">
			  <a href="javascript:;" @click="tobillflow">
			    <p v-if="data.btTaskCount != '0'">{{data.btTaskCount || 0}}</p>
			    <p v-if="data.btTaskCount == '0'" style="fontSize:24px;lineHeight:48px;">暂无待办</p>
			    <span>账单提交</span>
			  </a>
			</li>
    </ul>
  </div>

  <section v-if="permissions.indexOf('c110') > -1">
    <div class="css-work-warp">
      <h3 class="font-16">业务进度</h3>
    </div>
    <ul class="business-container">
      <li>
        <div class="head">
          <span class="sign"></span>
          <p class="color-666">{{rentStateVal}}</p>
          <span class="icon-predict-more extension-icon" @mouseenter="rentStateFlag = true" @mouseleave="rentStateFlag = false"></span>
        </div>
        <div class="content">
          <div class="show-icon" style="backgroundColor:rgba(245,74,74,0.3)">
            <span class="icon-Nav-home-expiringcontract" style="backgroundColor:#F54A4A"></span>
          </div>
          <div class="num-container">
            <p class="left" @click="goToRent('0')">{{rentStateNum.unitCount || 0}}</p>
            <p class="middle" @click="goToRent('1')">{{rentStateNum.wpCount || 0}}</p>
            <p class="right" @click="goToRent('2')">{{rentStateNum.stCount || 0}}</p>
          </div>
        </div>

        <div class="bottom">
          <p class="left">单元</p>
          <p class="middle">工位</p>
          <p class="right">车位</p>
        </div>
      </li>

      <li>
        <div class="head">
          <span class="sign"></span>
          <p class="color-666">合同状态-待处理</p>
        </div>
        <div class="content">
          <div class="show-icon" style="backgroundColor:rgba(133,164,250,0.3)">
            <span class="icon-Nav-home-pendingcontract" style="backgroundColor:#85A4FA"></span>
          </div>
          <div class="num-container">
            <p class="left" @click="goToContract('wa')">{{data.waContractCount ? data.waContractCount : '0'}}</p>
            <p class="middle" @click="goToContract('rj')">{{data.rjContractCount ? data.rjContractCount : '0'}}</p>
          </div>
        </div>

        <div class="bottom">
          <p class="left">待审批</p>
          <p class="middle">待修改</p>
        </div>
      </li>

      <li>
        <div class="head">
          <span class="sign"></span>
          <p class="color-666">{{paymentStateVal}}</p>
          <span class="icon-predict-more extension-icon" @mouseenter="paymentStateFlag = true" @mouseleave="paymentStateFlag = false"></span>
        </div>
        <div class="content" style="borderRight:none">
          <div class="show-icon" style="backgroundColor:rgba(244,174,71,0.3)">
            <span class="icon-Nav-home-fnance" style="backgroundColor:#F4AE47"></span>
          </div>
          <div class="num-container">
            <p class="left" @click="goToBillList('WP')">{{paymentStateNum.wpCount || 0}}</p>
            <p class="middle" @click="goToBillList('PPE')">{{paymentStateNum.ppeCount || 0}}</p>
          </div>
        </div>

        <div class="bottom">
          <p class="left">未收</p>
          <p class="middle">部分未收</p>
        </div>
      </li>

    </ul>
  </section>

  <!-- 资源总览 -->
  <div class="resource-title-container" v-show="permissions.indexOf('c111') !== -1 ||  permissions.indexOf('c114') !== -1 || permissions.indexOf('c115') !== -1">
    <p>资源总览</p>
    <ul class="bottom-nav">
      <li :class="{active:curChartPanel == '缴费入驻维度'}" @click="selectChartPanel('缴费入驻维度')" v-show=" permissions.indexOf('c115') > -1 ">缴费入驻维度</li>
      <li :class="{active:curChartPanel == '签约维度'}" @click="selectChartPanel('签约维度')" v-show=" permissions.indexOf('c114') > -1 ">签约维度</li>
      <li :class="{active:curChartPanel == '实时维度'}" @click="selectChartPanel('实时维度')" v-show=" permissions.indexOf('c111') > -1 ">实时维度</li>
    </ul>
  </div>

  <section class="chart-total-container" v-show="permissions.indexOf('c111') !== -1 ||  permissions.indexOf('c114') !== -1 || permissions.indexOf('c115') !== -1">
    <div class="project-container">
      <div class="title">
        <span></span>
        <p class="color-666">项目</p>
      </div>
      <div class="chart">
        <span>{{ fnProjectCount + wfProjectCount }}</span>
        <p>项目总数(个)</p>
      </div>
      <input type="range" disabled :style="{'backgroundSize':fnProjectPer+'% 100%'}">
      <ul class="indicator">
        <li>
          <span class="circle yy"></span>
          <p>运营中</p>
          <i>{{fnProjectCount}} ({{fnProjectPer}}%)</i>
        </li>

        <li>
          <span class="circle cb"></span>
          <p>筹备中</p>
          <i>{{wfProjectCount}} ({{wfProjectPer}}%)</i>
        </li>
      </ul>
    </div>

    <!-- <div class="unit-chart-type-selector" style="float:right;">
      <hl-select :data="unitChartTypeList" v-model="selectedUnitChartType" :width="120" @on-change="selectUnitChartType" class="mr-10"></hl-select>
    </div> -->

    <div class="chart-container">
      <!-- 实时维度 -->
      <div v-show="permissions.indexOf('c111') > -1 && curChartPanel === '实时维度' ">
        <div class="dy-flex">
          <div class="dy-fx-1 relative">
            <div class="title-wrap clearfix">
              <div class="title">
                <span class="sign" style="left:0"></span>
                <p class="color-666">单元</p>
              </div>
              <!-- <ul class="button-unit ss-unit">
                <li class="active">合同面积</li>
                <li>单元面积</li>
                <li>单元数量</li>
                <div class="sign"></div>
              </ul> -->

              <div class="unit-chart-type-selector" style="position:absolute;right:0px;">
                <hl-select :data="unitChartTypeList" v-model="selectedUnitChartType" :width="120" @on-change="selectUnitChartType" class="mr-10"></hl-select>
              </div>
            </div>
            <div class="unit-chart" style="width:100%;height:228px;padding:0 4px;"></div>
            <div class="project-chart1-bb"></div>
          </div>
          <div class="dy-fx-1 relative">
            <div class="title-wrap">
              <div class="title">
                <span class="sign"></span>
                <p class="color-666">工位</p>
              </div>
            </div>
            <div class="wp-chart" style="width:100%;height:228px;padding:0 4px;"></div>
            <div class="project-chart2-bb"></div>
          </div>
          <div class="dy-fx-1 relative">
            <div class="title-wrap">
              <div class="title">
                <span class="sign"></span>
                <p class="color-666">车位</p>
              </div>
            </div>
            <div class="st-chart" style="width:100%;height:228px;padding:0 4px;"></div>
          </div>
        </div>
      </div>
      <!-- 签约维度 -->
      <div v-show="permissions.indexOf('c114') > -1 && curChartPanel === '签约维度' ">
        <div class="dy-flex">
          <div class="dy-fx-1 relative">
            <div class="title-wrap clearfix">
              <div class="title">
                <span class="sign" style="left:0"></span>
                <p>单元</p>
              </div>
              <!-- <ul class="button-unit qy-unit">
                <li class="active">合同面积</li>
                <li>单元面积</li>
                <li>单元数量</li>
                <div class="sign"></div>
              </ul> -->

              <div class="unit-chart-type-selector" style="position:absolute;right:0px;">
                <hl-select :data="unitChartTypeList" v-model="selectedUnitChartType" :width="120" @on-change="selectUnitChartType" class="mr-10"></hl-select>
              </div>
            </div>
            <div class="unit-qy-chart" style="width:100%;height:228px;padding:0 4px;"></div>
            <div class="project-chart1-bb"></div>
          </div>

          <div class="dy-fx-1 relative">
            <div class="title-wrap">
              <div class="title">
                <span class="sign"></span>
                <p>工位</p>
              </div>
            </div>
            <div class="wp-qy-chart" style="width:100%;height:228px;padding:0 4px;"></div>
            <div class="project-chart2-bb"></div>
          </div>

          <div class="dy-fx-1 relative">
            <div class="title-wrap">
              <div class="title">
                <span class="sign"></span>
                <p>车位</p>
              </div>
            </div>
            <div class="st-qy-chart" style="width:100%;height:228px;padding:0 4px;"></div>
          </div>
        </div>
      </div>
      <!-- 缴费入住维度 -->
      <div v-show="permissions.indexOf('c115') > -1 && curChartPanel === '缴费入驻维度' ">
        <div class="dy-flex">
          <div class="dy-fx-1 relative">
            <div class="title-wrap clearfix">
              <div class="title">
                <span class="sign" style="left:0"></span>
                <p>单元</p>
              </div>
              <!-- <ul class="button-unit rz-unit">
                <li class="active">合同面积</li>
                <li>单元面积</li>
                <li>单元数量</li>
                <div class="sign"></div>
              </ul> -->

              <div class="unit-chart-type-selector" style="position:absolute;right:0px;">
                <hl-select :data="unitChartTypeList" v-model="selectedUnitChartType" :width="120" @on-change="selectUnitChartType" class="mr-10"></hl-select>
              </div>
            </div>

            <div class="unit-rz-chart" style="width:100%;height:228px;padding:0 4px;"></div>
            <div class="project-chart1-bb"></div>
          </div>

          <div class="dy-fx-1 relative">
            <div class="title-wrap clearfix">
              <div class="title">
                <span class="sign"></span>
                <p>工位</p>
              </div>
            </div>
            <div class="wp-rz-chart" style="width:100%;height:228px;padding:0 4px;"></div>
            <div class="project-chart2-bb"></div>
          </div>

          <div class="dy-fx-1 relative">
            <div class="title-wrap clearfix">
              <div class="title">
                <span class="sign"></span>
                <p>车位</p>
              </div>
            </div>

            <div class="st-rz-chart" style="width:100%;height:228px;padding:0 4px;"></div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 物业面积构成、行业面积分析 -->
  <section class="clearfix" v-show="permissions.indexOf('c116') > -1">
    <div class="wy-area-container" @click="goBaobiao(2)">
      <div class="title">
        <p class="color-666">物业面积构成</p>
        <span class="sign"></span>
      </div>
      <div id="yt-chart-container" style="width:320px;height:250px;"></div>
    </div>

    <div class="industry-area-container" @click="goBaobiao(1)">
      <div class="title">
        <p class="name color-666">入驻企业行业面积分析</p>
        <span class="sign"></span>
        <p class="num-wrap">总企业数(个) <i class="total-qy-num">{{industryChartData.companyCount || 0}}</i></p>
      </div>
      <ul id="industry-chart-container">
        <li v-for="(item,i) in industryChartData.industryList">
          <p class="name">{{item.name}}</p>
          <input class="range" type="range" disabled :style="{'backgroundSize':item.percentage +'% 100%'}">
          <div class="per">{{item.acreage}}({{item.percentage}}%)</div>
        </li>
      </ul>
    </div>
  </section>
  <!-- 资源地图 -->
  <section v-show="permissions.indexOf('c112') > -1">
    <div class="css-work-warp">
      <h3 class="font-16">资源地图</h3>
    </div>

    <div class="work-resource-amap-container clearfix">
      <div class="work-project-outer-container">
        <ul>
          <li class="work-project-item" :class="{active:item.id === projectId}" v-for="(item,index) in projects" :id="item.id" @click="getBuildingData(item.id,item.name)" @mouseenter="showInfoWindow(item.id,index)">
            <div class="project-item-padding dy-flex" style="align-items: center;">
              <div class="location-sign">
                <img v-if="item.id !== projectId" class="location-image" :src="'assets/images/location/location-red-' + (index + 1) + '.png'" alt="定位图标">
                <img v-if="item.id === projectId" class="location-image" :src="'assets/images/location/location-green-' + (index + 1) + '.png'" alt="定位图标">
              </div>
              <img class="work-project-image" :src="item.preview+'?w=188&h=188'" alt="项目图">
              <div class="project-mes-container">
                <h3>{{item.name}}</h3>
                <p>面积／{{item.acreage | formatNum}}m²</p>
                <p>工位／{{item.wpCount}}个</p>
                <p>车位／{{item.stCount}}个</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="work-amap-outer-container">
        <div class="work-sign">
          <p>{{amapProjectName}}</p>
          <span class="close" @click="backToAmap">×</span>
        </div>
        <div class="work-amap-container" id="amap-container" v-show="!buildingFlag">

        </div>

        <!-- 项目下楼宇列表 -->
        <ul class="building-container" v-show="buildingFlag">
          <li class="building-item cursor" v-for="(item,index) in building" @click="totenant(item.buildingId)">
            <div class="relative">
              <img :src="item.preview+'?w=184&h=140'" alt="楼宇图">
              <div class="building-image-backdrop"></div>
              <p class="building-name">{{item.name}}</p>
            </div>
            <div class="table">
              <div class="dy-flex">
                <div class="dy-fx-2 color-999">(类型)</div>
                <div class="dy-fx-3 rent-color">(出租)</div>
                <div class="dy-fx-3 color-999">(空置)</div>
              </div>
              <div class="dy-flex">
                <div class="dy-fx-2 color-999">单元(m²)：</div>
                <div class="dy-fx-3 rent-color">{{item.rentAcreage | formatNum}}</div>
                <div class="dy-fx-3 color-999">{{item.vaAcreage | formatNum}}</div>
              </div>
              <div class="dy-flex">
                <div class="dy-fx-2 color-999">工位(个)：</div>
                <div class="dy-fx-3 rent-color">{{item.rentWpCount}}</div>
                <div class="dy-fx-3 color-999">{{item.vaWpCount}}</div>
              </div>
              <div class="dy-flex">
                <div class="dy-fx-2 color-999">车位(个)：</div>
                <div class="dy-fx-3 rent-color">{{item.rentStCount}}</div>
                <div class="dy-fx-3 color-999">{{item.vaStCount}}</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <div class="3Dhouse-container"></div>
</section>

<script src="modules/system_config/scripts/right_company.js" charset="utf-8"></script>
<script src="modules/workbench/scripts/chart-wuye.js" charset="utf-8"></script>
<!--  实时维度图表 -->
<script src="modules/workbench/scripts/chart_gongwei.js" charset="utf-8"></script>
<script src="modules/workbench/scripts/chart_danyuan.js" charset="utf-8"></script>
<script src="modules/workbench/scripts/chart_chewei.js" charset="utf-8"></script>
<!--  签约维度图表 -->
<script src="modules/workbench/scripts/chart_qy_gongwei.js" charset="utf-8"></script>
<script src="modules/workbench/scripts/chart_qy_danyuan.js" charset="utf-8"></script>
<script src="modules/workbench/scripts/chart_qy_chewei.js" charset="utf-8"></script>
<!--  缴费入住图表 -->
<script src="modules/workbench/scripts/chart_rz_gongwei.js" charset="utf-8"></script>
<script src="modules/workbench/scripts/chart_rz_danyuan.js" charset="utf-8"></script>
<script src="modules/workbench/scripts/chart_rz_chewei.js" charset="utf-8"></script>
<script src="modules/workbench/scripts/work.js" charset="utf-8"></script>
